<template>
  <div style="height:90%;width:100%;">
    <div class="princiEchart" style="height:100%;width:100%;"></div>
  </div>
</template>

 <script>
export default {
  name: "princiEchart",
  props: {
    principal: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  watch:{
    principal(val){
     this.getPie(val);
    }
  },
  methods: {
    getPie(val){
      const that = this;
      var myChart = this.$echarts.init(document.querySelector(".princiEchart"));
       var option = {

                  tooltip: {
                       trigger: "axis",
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                           }
                  },
                  legend: {
                      itemWidth:15,
                      itemHeight:15,
                      data:['存存量客户','存增量客户','增量客户'],
                  },
                  grid: {
                          left: '15px',
                          right: '15px',
                          bottom: '15px',
                          containLabel: true
                      },
                  xAxis: {
                      data:val.xAxis,
                      splitLine:{
                          show:false,
                      },
                  },
                  yAxis: {
                       splitLine:{
                          show:false,
                      },
                      axisLabel: {
                          show:false
                      },
                      axisTick:{ //y轴刻度线
                          show:false
                      },
                      axisLine:{ //y轴
                          show:false
                      },
                  },
                  series: [{
                      name: '存存量客户',
                      type: 'bar',
                      stack:'使用情况',
                       data:val.y0Axis,
                      barWidth : 30,//柱图宽度
                      itemStyle:{
                           normal:{
                            color:"rgb(183,222,232)",
                             label: {
                                 show: true,
                                 position: 'inside',
                                 textStyle: {
                                    color: 'black'
                                  },
                              }

                             },
                      }
                  },{
                      name: '存增量客户',
                      type: 'bar',
                      stack:'使用情况',
                      data: val.yAxis,
                      barWidth : 30,//柱图宽度
                      itemStyle:{

                           normal:{
                             color:"rgb(252,213,181)",
                             label: {
                                 show: true,
                                 position: 'inside',
                                 textStyle: {
                                    color: '#333'
                                  },
                              }

                             },
                      }
                  },
                  {
                      name: '增量客户',
                      type: 'bar',
                      stack:'使用情况',
                      data:  val.y1Axis,
                      barWidth : 30,//柱图宽度
                      itemStyle:{
                           normal:{
                           color:"rgb(195,214,155)",
                             label: {
                                 show: true,
                                 position: 'top',
                                 textStyle: {
                                    color: 'rgb(0,142,64)'
                                  },
                              }

                             },
                      }
                  },
                  // {
                  //     name: '整体收入',
                  //     type: 'line',
                  //     data:  val.y2Axis,
                  //     barWidth : 30,//柱图宽度
                  //     itemStyle:{
                  //          normal:{color:"rgb(198,97,94)",
                  //          label: {
                  //              show: true,
                  //              position: 'bottom',
                  //              textStyle: {
                  //                 color: 'rgb(198,97,94)'
                  //               },
                  //           }},
                  //     }
                  // },
                  ]
              };
      myChart.setOption(option);
    }
  },
};
 </script>

 <style>
 </style>
